<template>
  <div class="waybill-details">
    <a-spin :spinning="loading">
      <a-form :model="formState" autocomplete="off">
        <div class="base-info">
          <div class="title">基础信息</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumnMap" :key="index" :span="8">
              <a-form-item
                :class="[['waybillNum', 'pickupCity', 'addressType'].includes(item.name) ? 'emphasis-item' : '']"
                v-bind="item"
                :label-col="{ style: 'width:110px' }"
                :wrapper-col="{ style: 'calc(100% - 110px)' }"
              >
                <template v-if="item.name === 'addressType'">
                  {{ getLabelByDict("WAYBILL_TYPE", formState[item.name]) }}
                </template>
                <template v-else-if="item.name === 'customsDeclarationTitle'">
                  {{ formState[item.name] }}
                </template>
                <template v-else-if="item.name === 'countryRegionName'">
                  <span>{{ formState[item.name] }} </span>
                  <!-- <a-button type="link" @click="modifyCountryRegionNameHandle" v-if="['5', '6'].includes(activeKey)">修改</a-button> -->
                </template>
                <template v-else-if="item.name === 'squaresNumber'">
                  {{ formState[item.name] }}
                </template>
                <template v-else-if="item.name === 'makeInvoiceStatus'">
                  <a-button type="link" @click="showInvoiceHandle">查看发票</a-button>
                  <a-button v-if="passData.makeInvoiceStatus === -2 && activeKey !== '0'" type="link" @click="modifyInvoiceHandle">修改发票</a-button>
                </template>
                <template v-else-if="item.name === 'shippingMethod'">
                  <span v-if="formState.shippingMethod === 0">上门取件</span>
                  <span v-if="formState.shippingMethod === 1">自送入仓</span>
                </template>
                <template v-else-if="item.name === 'remark'">
                  <span :title="formState.remark">{{ formState.remark }}</span>
                  <a-button type="link" @click="modifyRemarkHandle" v-if="activeKey !== '0'">修改</a-button>
                </template>
                <template v-else-if="item.name === 'innerRemark'">
                  <span :title="formState.innerRemark">{{ formState.innerRemark }}</span>
                  <a-button type="link" @click="modifyInnerRemarkHandle" v-if="activeKey !== '0'">修改</a-button>
                </template>
                <template v-else>{{ formState[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>

          <div class="showOrRetractButton">
            <a-button @click="showOrRetract">{{ formItemColumnMap.length > 3 ? "收起" : "展开" }}</a-button>
          </div>
        </div>
      </a-form>
      <a-radio-group v-model:value="detailsActiveKey" button-style="solid" style="margin-top: 10px">
        <a-radio-button value="1">材积明细</a-radio-button>
        <a-radio-button value="2">报价</a-radio-button>
        <a-radio-button value="3">运单踪迹</a-radio-button>
        <a-radio-button value="4">附件</a-radio-button>
      </a-radio-group>
      <div class="box-info" v-if="detailsActiveKey === '1'">
        <div class="title">
          <div style="display: flex">
            <span>材积明细</span>
            <div style="margin-left: 10px">
              客户可见:
              <a-switch v-model:checked="formState.customerPicimgShow" checked-children="开" un-checked-children="关" @click="isShowPhotoHandle" />
            </div>
          </div>
          <div class="title-Inner-div">
            <span>总结算重: {{ formState.settlementWeight || 0 }}</span>
            <a-button type="link" @click="SetTransferNumberHandle" v-if="activeKey !== '0'">设置转单号</a-button>
          </div>
        </div>
        <div class="table-content">
          <vxe-table
            border
            show-overflow="title"
            height="600"
            size="small"
            align="center"
            :data="formState.preOrderShipmentBoxVolume"
            :row-config="{ height: 45 }"
            :scroll-y="{ enabled: true, gt: 30 }"
            show-footer
            :footer-method="footerMethod"
          >
            <vxe-column type="seq" width="50"></vxe-column>
            <vxe-column field="shipmentBoxNumber" title="系统箱号" min-width="140">
              <template #default="{ row }">
                <div>{{ row.fbaBoxNumber }}</div>
                <div>{{ row.shipmentBoxNumber }}</div>
              </template>
            </vxe-column>
            <vxe-column field="tag" title="材积限制">
              <template #default="{ row }">
                <span class="redColor">{{ row.tag }}</span>
              </template>
            </vxe-column>
            <vxe-column field="pickingBoxLength" title="长"></vxe-column>
            <vxe-column field="pickingBoxWidth" title="宽"></vxe-column>
            <vxe-column field="pickingBoxHeight" title="高"></vxe-column>
            <vxe-column field="pickingBoxWeight" title="实重"></vxe-column>
            <vxe-column field="volumeWeight" title="材积重"></vxe-column>
            <vxe-column field="circumference" title="周长"></vxe-column>
            <vxe-column field="transferNo" title="转单号"></vxe-column>
            <vxe-column field="picture" title="拣货图片" min-width="100">
              <template #default="{ row }">
                <a-image v-if="row.picture" :width="50" :src="row.picture" />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>

      <!-- 报价合计 -->
      <div class="total-quotation" v-if="detailsActiveKey === '2'">
        <!-- 基础结算单价 -->

        <template v-if="formState.freightCost.isShow !== 0">
          <div class="unit-price-update">
            <div class="title">基础结算单价</div>
            <a-row :guuter="16">
              <a-col :span="8">
                <label for="#">标准单价: </label>
                <span>{{ formState.freightCost?.unitPrice }} 元/KG</span>
              </a-col>
              <a-col :span="8">
                <label for="#">调整单价: </label>
                <span>{{ formState.freightCost.adjustUnitPrice > 0 ? "增加" : "减少" }} {{ formState.freightCost.adjustUnitPrice }} 元/KG</span>
              </a-col>
              <a-col :span="8">
                <label for="#">调价理由: </label>
                <span>{{ formState.freightCost.adjustReason }}</span>
              </a-col>
              <a-col :span="8">
                <label for="#">基础单价: </label>
                <span>{{ formState.freightCost.clearingUnitPrice }} 元/KG</span>
              </a-col>
            </a-row>
          </div>
          <!-- 附加费明细 -->
          <div class="additional-charge">
            <div class="title">附加费明细</div>
            <vxe-table border show-overflow="title" height="300" :data="formState.bizOrderShipmentCosts" :scroll-y="{ enabled: true, gt: 30 }">
              <vxe-column field="costName" title="费用名称" min-width="140"></vxe-column>
              <vxe-column field="unitPrice" title="单价"></vxe-column>
              <vxe-column field="number" title="数量">
                <template #default="{ row }"> {{ row.number }} {{ row.unit }} </template>
              </vxe-column>
              <vxe-column field="totalPrice" title="合计金额"></vxe-column>
              <vxe-column field="createTime" title="添加时间">
                <template #default="{ row }">
                  {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
              </vxe-column>
              <vxe-column field="createName" title="添加人"> </vxe-column>
            </vxe-table>
          </div>
          <!-- 报价合计 -->
          <div class="total-quotation">
            <div class="title">报价合计</div>
            <div class="quotation-item">
              标准运费: <span class="emphasis-item">{{ formState.totalNormFreightPriceStr }}</span>
            </div>
            <div class="quotation-item">
              调整运费: <span class="emphasis-item">{{ formState.totalAdjustPriceStr }}</span>
            </div>
            <div class="quotation-item">
              结算费用总计: <span class="emphasis-item">{{ formState.totalPriceStr }}</span>
            </div>
          </div>
        </template>

        <!-- 基础单价为0的时候显示空数据 -->
        <template v-if="formState.freightCost.isShow === 0">
          <a-empty />
        </template>
      </div>

      <!-- 运单轨迹 -->
      <div class="track-info-wrapper" v-if="detailsActiveKey === '3'">
        <div class="track-info-title">
          <span class="title">运单轨迹</span>
          <!-- <a-button v-debounce type="primary" style="margin-right: 10px" @click="init(passData.id)" :disabled="passData.trackState === 1">更新运踪</a-button> -->
        </div>
        <TrackInfo :pass-data="formState.logistics" @submit="dialogSubmitHandle"></TrackInfo>
      </div>
      <!-- 附件 -->
      <div class="file-list" v-if="detailsActiveKey === '4'">
        <div class="title">
          <span>附件</span>
          <a-button type="primary" @click="uploadFileHandle" v-if="activeKey !== '0'">上传附件</a-button>
        </div>
        <div class="table-content">
          <vxe-table border show-overflow="title" height="280" :data="formState.bizPreOrderShipmentFileResDtoList" :scroll-y="{ enabled: true, gt: 30 }">
            <vxe-column field="filename" title="文件名" min-width="140"></vxe-column>
            <vxe-column field="createName" title="上传人"></vxe-column>
            <vxe-column field="fileType" title="类型">
              <template #default="{ row }">
                <span v-if="row.fileType * 1 === 2">其他</span>
                <span v-if="row.fileType * 1 === 1">报关单</span>
              </template>
            </vxe-column>
            <vxe-column field="createTime" title="上传时间">
              <template #default="{ row }">
                {{ dayjs(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </vxe-column>
            <vxe-column field="customerShow" title="客户可见">
              <template #default="{ row }">
                <a-switch v-model:checked="row.customerShow" @change="(e:boolean)=> changeStatus(e,row)" :loading="loading" />
              </template>
            </vxe-column>
            <vxe-column field="action" title="操作">
              <template #default="{ row }">
                <a-button type="link" @click="downloadFileHandle(row)">下载附件</a-button>
                <a-button type="link" danger @click="deleteFileHandle(row)">删除</a-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-spin>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import TrackInfo from "../trackInfo/index.vue";
import UploadFile from "../uploadFile/index.vue";
import ModifyRemark from "../modifyRemark/index.vue";
import ShowInvoice from "@/views/waybillManagement/stockManagement/components/showInvoice/index.vue";
import MakeInvoice from "@/views/waybillManagement/stockManagement/components/makeInvoice/index.vue";
import BatchUploadFile from "../batchUploadFile/index.vue";
import ModifyCountryRegionName from "../modifyCountryRegionName/index.vue";
import SetNumber from "../setNumber/index.vue";
import ModalHook from "@/hook/modalHook";
import dayjs from "dayjs";
export default {
  components: {
    TrackInfo,
    UploadFile,
    ShowInvoice,
    MakeInvoice,
    SetNumber,
    ModifyRemark,
    ModifyCountryRegionName,
    BatchUploadFile
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { formItemColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: CustomerServiceWaybill.ListRows;
    activeKey: string;
  }>(),
  {}
);
const { getLabelByDict, downloadFileByUrl } = CommonHook();
const { visible, passData, activeKey } = toRefs(props);
const { formState, init, loading, dialogOpts, drawerOpts, detailsActiveKey, formItemColumnMap } = InitHook({ formItemColumn });
const {
  deleteFileHandle,
  downloadFileHandle,
  uploadFileHandle,
  showInvoiceHandle,
  modifyInvoiceHandle,
  SetTransferNumberHandle,
  modifyRemarkHandle,
  modifyInnerRemarkHandle,
  footerMethod,
  showOrRetract,
  isShowPhotoHandle,
  changeStatus
  // modifyCountryRegionNameHandle
} = OperationHook({
  dialogOpts,
  formState,
  passData,
  downloadFileByUrl,
  init,
  drawerOpts,
  formItemColumnMap,
  formItemColumn,
  loading
});

const { dialogSubmitHandle, drawerSubmitHandle } = ModalHook({
  dialogOpts,
  drawerOpts,
  callBack: () => init(passData.value.id)
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init(passData.value.id);
      detailsActiveKey.value = "1";
    }
  }
);
init(passData.value.id);
</script>
<style lang="stylus" scoped>
.waybill-details {
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }

    .showOrRetractButton{
      display:flex;
      justify-content:flex-end;
      padding:10px
    }
    .base-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .emphasis-item {
          color: #fe8100;
          > :deep(.ant-form-item-label){
            >label{
              color: #fe8100;
            }
          }
        }
        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }
    .box-info{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .title{
            display: flex;
            flex-direction:column;
            .title-Inner-div{
              display:flex;
              justify-content:space-between;
              align-items:center
            }
        }
        .table-content{
          padding: 0 12px 12px 12px;
        }
    }
    .track-info-wrapper{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .track-info-title{
          display:flex;
          justify-content:space-between;
          align-items:center
        }
    }

    .total-quotation{
      margin-top: 12px;
      background-color: #fff;
      box-shadow: 0px 0px 4px 0px #ccc;
      padding: 12px;

      border-radius: 8px;
      >.quotation-item{
        font-weight: 600;
        margin-bottom: 12px;
      }
    }
    .additional-charge{
      background-color: #fff;
      padding: 12px;

      border-radius: 8px;
    }
    .unit-price-update{
      background-color: #fff;
      padding: 12px;

      border-radius: 8px;
      label{
        font-weight: 600;
        padding-right: 16px;
      }
      .adjust-unit-price{
        >div{
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          white-space: nowrap;
          margin-right: 16px;
        }
      }
      >div {
        display: flex;
        align-items: center;
        font-weight: 600;
      }
      :deep(.ant-col){
        margin-bottom: 12px;
      }
    }
    .file-list{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .table-content{
        padding: 0 12px 12px 12px;
      }
    }

    .redColor{
      color:red
    }

    :deep(.ant-radio-group){
      width 100%

    .ant-radio-button-wrapper:first-child{
        border-radius: 4px 0px 0px 4px;
    }

    .ant-radio-button-wrapper:last-child{
        border-radius: 0px 4px 4px 0px;
    }

    .ant-radio-button-wrapper{
        width:25%;
        text-align:center
    }
  }

  .emphasis-item {
    color: #fe8100;
    > :deep(.ant-form-item-label){
        >label{
            color: #fe8100;
        }
    }
}
}
</style>
